

<template>
    <view class="groupMembers">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            style="
                background: #fff;
                width: 750rpx;
                position: fixed;
                z-index: 100;
            "
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            style="border-bottom: none"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title d-flex a-center j-between">入群方式</view>
            <view class="right_box" @tap="finish">
                <text style="color:#333;font-size:30rpx;font-weight:400;">完成</text>
            </view>
        </view>

        <view
            class="content"
            :style="{ top: `calc(  100rpx + ${systemInfo.statusBarHeight}px)` }"
        >
			<!--
            <view class="row d-flex a-center j-between" :class="{disabled:!imStore.groupDetail.payAmount}"   @tap="changeStatu(4)">
                <view class="d-flex a-center">
                    <i class="icon icon-a-zhifuqianbaodaizhifu"></i>
                    付费加入无需审核（付费群）
                </view>
                <i v-if="status===4" style="font-size:40rpx;color:#1DC691;" class="icon icon-xuanzhong"></i>
            </view>
			-->
            <view class="row d-flex a-center j-between" :class="{disabled:imStore.groupDetail.payAmount}" @tap="changeStatu(1)">
                <view class="d-flex a-center">
                    <i class="icon icon-gongkai"></i>
                    无需审核直接加入
                </view>
                <i v-if="status===1" style="font-size:40rpx;color:#1DC691;" class="icon icon-xuanzhong"></i>
            </view>
            <view class="row d-flex a-center j-between" :class="{disabled:imStore.groupDetail.payAmount}" @tap="changeStatu(2)">
                <view class="d-flex a-center">
                    <i class="icon icon--shenhe"></i>
                    需管理员同意
                </view>
                <i v-if="status===2" style="font-size:40rpx;color:#1DC691;" class="icon icon-xuanzhong"></i>
            </view>
            <view class="row d-flex a-center j-between" @tap="changeStatu(3)">
                <view class="d-flex a-center">
                    <i class="icon icon-jinzijikejian"></i>
                    禁止所有人加入
                </view>
                <i v-if="status===3" style="font-size:40rpx;color:#1DC691;" class="icon icon-xuanzhong"></i>
            </view>
        </view>
    </view>

    <!-- <inputArea ref="input_area" :inputText="contentText" @updateText="updateText" @inpFocus="inpFocus" :keyboardHeight="keyboardHeight"></inputArea> -->
    <!-- <imagePreview ref="preview"></imagePreview> -->
</template>

<script setup lang="ts">
import { ref, computed, reactive,nextTick } from "vue";
import { onReady, onShow, onLoad,onUnload} from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { groupUpdate } from "@/api/api";
import { imStore as imStore1 } from "@/store/imStore";
import { updateGroupProfile,getGroupProfile } from "@/hooks/imHooks";

const goBack = () => {
    uni.navigateBack();
};

const status = ref(null)
const type = ref(null)
const trendId = ref(null)
const groupId = ref(null)


const userData: any = userDataStore();
const systemInfo: any = systemInfoStore();
const imStore: any = imStore1();

const groupProfile = ref({});

const finish = async() => {

    let joinOption = '';
    if(status.value===1||status.value===4){
        joinOption=uni.$TIM.TYPES.JOIN_OPTIONS_FREE_ACCESS
    }
    if(status.value===2){
        joinOption=uni.$TIM.TYPES.JOIN_OPTIONS_NEED_PERMISSION

    }
    if(status.value===3){
        joinOption=uni.$TIM.TYPES.JOIN_OPTIONS_DISABLE_APPLY

    }


    await updateGroupProfile({groupID:groupId.value,joinOption})
    await groupUpdate({groupId:groupId.value,joinOption})
    goBack();
}


const changeStatu = (statu:number)=>{
    console.log(statu);
    console.log(imStore.groupDetail.payAmount);

    if(!imStore.groupDetail.payAmount&&statu===4){
        return
    }
    if(imStore.groupDetail.payAmount&&(statu===2||statu===1)){
        return
    }
    status.value = statu;
}


const GetGroupProfile = async (groupId: string) => {


    if(!groupId){
        return;
    }

    if (!uni.$chat_isSDKReady) {
        setTimeout(() => {
            GetGroupProfile(groupId);
        }, 200);
        return;
    }
    const res: any = await getGroupProfile(groupId);
    const { code, data } = res;
    if (code !== 0) {
        uni.showToast({
            icon: "none",
            title: "获取群信息失败",
            duration: 1500,
        });
        return;
    }

    groupProfile.value = data.group;


    const { joinOption } = data.group;
    if(joinOption === uni.$TIM.TYPES.JOIN_OPTIONS_NEED_PERMISSION){
        if(imStore.groupDetail.payAmount){
            status.value = 4;
        }else{
            status.value = 2;
        }
    }
    if(joinOption===uni.$TIM.TYPES.JOIN_OPTIONS_DISABLE_APPLY){
        status.value = 3;
    }
    if(joinOption===uni.$TIM.TYPES.JOIN_OPTIONS_FREE_ACCESS){
         if(imStore.groupDetail.payAmount){
            status.value = 4;
        }else{
            status.value = 1;
        }
    }
    // if(role.value==='Member'){
    //     goBack();
    // }

};


onReady(() => {});

onLoad((option: any) => {
    if(option.groupId){
        groupId.value = option.groupId;
        GetGroupProfile(option.groupId);
    }

    console.log('im groupDetail')
    console.log('im groupDetail')
    console.log('im groupDetail')
    console.log('im groupDetail')
    console.log(imStore.groupDetail.payAmount)
    // status.value = Number(option.status);
    // type.value = option.type;
    // trendId.value = option.id;

});

onUnload((option: any) => {
});

onShow(() => {});
</script>

<style lang="scss" scoped>
.groupMembers {
    width: 750rpx;
    height: 100vh;
    background: #fff;

    .content {
        position: absolute;
        width: 750rpx;
        left: 0;
        right: 0;
        // bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
        // bottom: calc(env(safe-area-inset-bottom) + 120rpx);
        bottom: 0;
        background: #f5f5f5;

        .row{
            width:710rpx;
            height:80rpx;
            margin:0 auto;
            margin-top:20rpx;
            background:#fff;
            border-radius: 20rpx;
            padding:0 20rpx;
            color:#333;
            font-size:30rpx;
            &.disabled{
                background:#eee;
                color:#999;
                .icon{
                    color:#999;
                }
            }
            .icon{
                margin-right:5rpx;
                font-size:40rpx;
            }
        }

    }
}
</style>
